<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.何为数据劫持</title>
  </head>
  <body>
    <script type="text/javascript" >
      /* 
        概念：捕获对象属性变化的一种手段，前端的响应式框架通常都会对数据进行劫持，
              这样当数据发生变化时，可以自动更新相关的视图或执行其他逻辑。
      */

     // 需求：能够知道a的变化，a只要变化了，控制台上就打印：“a变化了，值为：???”
    //  let obj = {a:1}

     // 很垃圾的一个实现
     /* let id = setInterval(() => {
      if(obj.a !== 1){
        console.log('a变化了，值为：',obj.a)
        clearInterval(id)
      }
     },100); */

    //  一个优秀实现
    let obj = {}
    let n = 1

    Object.defineProperty(obj,'a',{
      get(){
        return n
      },
      set(value){
        console.log(`a变化了，值为：${value}`)
        n = value
      }
    })
    </script>
  </body>
</html>